<template>
  <el-dialog :model-value="visible" :title="title" :width="width" @close="handleClose">
    <!-- 内容区域 -->
    <slot></slot>

    <!-- 底部按钮 -->
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 组件属性
defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '提示'
  },
  width: {
    type: String,
    default: '50%'
  }
})

// 组件事件
const emit = defineEmits(['confirm', 'update:visible'])

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
}

// 确认操作
const handleConfirm = () => {
  emit('confirm')
  emit('update:visible', false)
}
</script>
